<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Bus/总线/发布订阅者模式/观察者模式</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!--
		1：vuex数据层的框架
		2：发布订阅模式
		-->
    <div class="app">
        <child content="Dell"></child>
        <!-- <child content="Lee"></child> -->
    </div>
    <script type="text/javascript">
    Vue.prototype.bus = new Vue();
    Vue.component("child", {
        template: "<div @click='handleclick'>{{con}}</div>",
        data: function() {
            return {
                con: this.content
            }
        },
        props: {
            content: {
                type: String,
            }
        },
        methods: {
            handleclick: function() {
                this.bus.$emit("change", this.con);
            }
        },
        // 挂载完毕后
        mounted: function() {
            var that = this;
            // 监听change自定义事件
            this.bus.$on("change", function(msg) {
                console.log(msg)
            });
        }

    });
    var vm = new Vue({
        el: ".app",
        data: {

        },
        methods: {

        }
    })
    </script>
</body>

</html>